import React, { Component } from "react";
import YKNav from "../nav/YKNav";
import { SearchBar } from "antd-mobile";
import "./SearchCenter.scss";
import { searchGoods } from "../../data/api";
import { withRouter } from "react-router-dom";
class SearchCenter extends Component {
<<<<<<< HEAD
 
=======
  timeId = null;
>>>>>>> d13d89edcb0db6cb85dcfdeb484d5f331b6bf605
  state = {
    goodsList: [
      //   {
      //     goods_id: 55614,
      //     goods_name: "初语2017秋装新款字母休闲运动套头卫衣女 时尚圆领拼接长袖衣服"
      //   },
      //   {
      //     goods_id: 55614,
      //     goods_name: "初语2017秋装新款字母休闲运动套头卫衣女 时尚圆领拼接长袖衣服"
      //   }
    ],
  };
  valid = true; // 标识上次事件是否已经完成
  throttle = (fn, timeout) => {
    // 上次事件已经执行完毕
    if (this.valid) {
      this.valid = false; // 设置定义器
      setTimeout(()=> {
        fn.call(this); // 执行回调函数
        this.valid = true;
      }, timeout);
    }
  };
<<<<<<< HEAD
  timeId = null;
=======
>>>>>>> d13d89edcb0db6cb85dcfdeb484d5f331b6bf605
  debounce = (fn, time) => {
    if (this.timeId) {
      clearTimeout(this.timeId);
      this.timeId = null;
    }
    this.timeId = setTimeout(fn, time);
  };
  handleChange = (value) => {
    this.throttle(async () => {
<<<<<<< HEAD
         console.log(value);
=======
      //   console.log(value);
>>>>>>> d13d89edcb0db6cb85dcfdeb484d5f331b6bf605
      let res = await searchGoods({
        query: value,
      });
      // console.log(res);
      this.setState({
        goodsList: res.message || [],
      });
<<<<<<< HEAD
    }, 300);
=======
    }, 1000);
>>>>>>> d13d89edcb0db6cb85dcfdeb484d5f331b6bf605
  };
  handleItemClick = (goods_id) => {
    this.props.history.push("goodDetail/" + goods_id);
  };

  render() {
    return (
      <div className="ykSearchCenter">
        {/* 顶部导航开始 */}
        <YKNav title="搜索中心" left={true} ></YKNav>
        {/* 顶部导航结束 */}
        {/* 搜索框的开始 */}
        <SearchBar
          placeholder="搜索"
          cancelText="搜索"
          onChange={this.handleChange}
        />
        {/* 搜索框的结束 */}
        {/* 商品列表开始 */}
        <div className="scList">
          {this.state.goodsList.map((v, i) => {
            return (
              <div
                className="scListItem"
                onClick={this.handleItemClick.bind(this, v.goods_id)}
                key={v.goods_id}
              >
                {v.goods_name}
              </div>
            );
          })}
        </div>
        {/* 商品列表结束 */}
      </div>
    );
  }
}
export default withRouter(SearchCenter);
